<template>
  <div :id="id" style="width:100%;height:100%"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name:'pieEcharts',
  data() {
    return{
      myChart: null
    }
  },
  props: {
    id: {
      type:  String,
      default: "echartsbox"
    },
    echartObj: {
      type: Object,
      default:{}
    },
    titColor:{
      type:Number,
      default: 1, //1黑色 2主题色
    }
  },
  computed:{
    isCollapse(){
      return this.$store.getters.sidebar.opened
    }
  },
  watch:{
    isCollapse(){
      let timer = setTimeout(()=>{
        this.myChart.resize();
        clearTimeout(timer)
      },200)
    },
    echartObj:{
      handler(n,o){
        this.loadEChart()
      },
      deep: true
    }
  },
  methods: {
    loadEChart() {
      if (this.myChart){
        this.myChart.dispose();
      }
      this.myChart = echarts.init(document.getElementById(this.id));
      let options = {
        color : this.echartObj.color,
        title: {
            text: this.echartObj.data[0] + '%',
            x: 'center',
            y: 'center',
            textStyle: {
              fontWeight: 'bold',
              color: this.titColor == 1 ? '#333' : this.echartObj.color[0],
              fontSize: this.$base.fontSize(18)
            }
        },
        polar: {
          radius: ['70%', '85%'],
          center: ['50%', '50%'],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: 'category',
          show: false,
        },
        series: [
          {
            type: 'bar',
            roundCap: true,
            // barWidth: 60,
            showBackground: true,
            backgroundStyle: {
              color: '#eee',
            },
            data: this.echartObj.data,
            coordinateSystem: 'polar'
          }
        ] 
      }
      this.myChart.setOption(options);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  },
  destroyed (){
    window.removeEventListener('resize', () => {
      this.myChart.resize();
    })
    this.myChart.dispose()
  }
}
</script>
